本篇延續第六篇按鈕開關樣板，來觸發之後的行為

昨天做了一個開關，那要怎麼透過科好的按鈕，來判斷之後要做的行為呢?
並以原生js來判斷，平常都是用jq寫...都已忘了原生寫法

範例:
判斷為開，我就在下方新增文字"開"
判斷為關，我就在下方新增文字"關"

範例流程是
透過按鈕發生改變時，判斷是勾選狀態還是未被勾選狀態
如果勾選，就在下方新增文字"開"
如果未被勾選，我就在下方新增文字"關"

怎麼判斷是被勾選到的狀態呢?

原來在js裡面，是用.checked 來設置或返回是否應被選中

//語法
checkboxObject.checked=true|false

詳細可看w3school

而判斷觸發的元素為

e.target

而event.currentTarget則是事件繫結的元素，

雖然已完成想要的功能了

這樣我還想要....畫面一進來，就要判斷他是否被勾選並顯示畫面呢?
checkbox偏偏沒被改變阿，要怎麼直接讓他觸發change事件呢?

在jq寫法可以使用tigger來觸發指定的事件方法
例如:

$( "#foo" ).on( "change", function() {
  alert( $( this ).text() );
});
$( "#foo" ).trigger( "change" );

或是

$( "#foo" ).on( "change", function() {
  alert( $( this ).text() );
}).change();

▲這個方法之前我也是特別爬文才知道耶!

那js呢?我示範以下方式

1.使用dispatchEvent方法

dispatchEvent 可於 EventTarget 物件上觸發特定/自定義的 Event 物件實體，相當於依照註冊的順序呼叫它的 EventListener。

//html
<div>
  <input type="checkbox" id="demoCheckbox">
  <label for="demoCheckbox" class="labelCheckbox">  </label>
</div>

<p id="box"></p>

//JS
const checkbox = document.getElementById('demoCheckbox');
const boxTxt = document.getElementById('box');

checkbox.addEventListener('change', (e) => {
  if (e.target.checked) {
    boxTxt.innerText=`開 ${e.target.checked}`;
  } else {
   boxTxt.innerText=`關 ${e.target.checked}`;
  }
});

/*手動觸發*/
checkbox.dispatchEvent(new Event('change'));

附上程式碼
2.element.onchange();
使用這個方法需於HTML先加上onchange方法，之後再呼叫一次;

//HTML
<div>
  <input type="checkbox" id="demoCheckbox" onchange="touch(this);" >
  <label for="demoCheckbox" class="labelCheckbox">  </label>
</div>

<p id="box"></p>

//JS
function touch(e){
    if (e.checked) {
     boxTxt.innerText="開";
  } else {
     boxTxt.innerText="關";
  }
}

checkbox.onchange();

附上程式碼
最後就完成拉!

本篇參考資料:
https://www.jquery123.com/change/
https://newbedev.com/javascript-js-trigger-change-event-code-example

講完第七篇惹，那之後就跟著姐姐往第八篇前進吧～～